<template>
  <div style="width: 100%">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-table :data="users" class="tabCss" stripe border>
      <el-table-column type="index"></el-table-column>
      <el-table-column
        label="姓名"
        prop="userName"
        width="180px"
      ></el-table-column>
      <el-table-column label="年龄" prop="age" width="180px"></el-table-column>
      <el-table-column
        label="电话"
        prop="phone"
        width="180px"
      ></el-table-column>
      <el-table-column
        label="职业"
        prop="occupation"
        width="180px"
      ></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="small"
            @click="lookClick(scope.row, scope.$index)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrap">
      <pagination
        :total="total"
        :page.sync="myParams.pageIndex"
        :limit.sync="myParams.pageSize"
        :params="myParams"
        @pagination="getData"
        :pageSizes="[5]"
      />
    </div>
    <el-dialog title="用户详情" width="50%" :visible.sync="showUserDetail">
      <userDetail
        :userDetail="userDetailData"
        @cancle="cancleDialog"
        @submitData="receiveData"
      ></userDetail>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      showUserDetail: false,
      userDetailData: {
        userName: '',
        age: 0,
        phone: '',
        occupation: '',
      },
      total: 14,
      totalPage: 3,
      myParams: {
        pageNo: 1,
        pageSize: 5,
        token: getToken(),
      },
      users: [],
      pageData1: [
        {
          userName: 'join',
          age: 20,
          phone: '13546362023',
          occupation: '程序员',
        },
        {
          userName: 'case',
          age: 40,
          phone: '13546362023',
          occupation: '搬砖工',
        },
        {
          userName: 'zuozhu',
          age: 16,
          phone: '13546362023',
          occupation: '学生',
        },
        {
          userName: 'mingren',
          age: 20,
          phone: '13546362023',
          occupation: '律师',
        },
        {
          userName: 'xiaoying',
          age: 40,
          phone: '13546362023',
          occupation: '老师',
        },
      ],
      pageData2: [
        {
          userName: '刚哥',
          age: 20,
          phone: '13546362023',
          occupation: '程序员',
        },
        {
          userName: '刘涛',
          age: 40,
          phone: '13546362023',
          occupation: '搬砖工',
        },
        {
          userName: '笑哈哈',
          age: 16,
          phone: '13546362023',
          occupation: '学生',
        },
        {
          userName: '路费',
          age: 20,
          phone: '13546362023',
          occupation: '律师',
        },
        {
          userName: '鲍勃',
          age: 40,
          phone: '13546362023',
          occupation: '老师',
        },
      ],
      pageData3: [
        {
          userName: '米老鼠',
          age: 20,
          phone: '13546362023',
          occupation: '程序员',
        },
        {
          userName: '唐老鸭',
          age: 40,
          phone: '13546362023',
          occupation: '搬砖工',
        },
        {
          userName: '汤姆猫',
          age: 16,
          phone: '13546362023',
          occupation: '学生',
        },
        {
          userName: '杰瑞鼠',
          age: 20,
          phone: '13546362023',
          occupation: '律师',
        },
      ],
    }
  },
  mounted: function() {
    console.log('mounted')
    this.getData()
  },
  methods: {
    //查看
    lookClick(rowData, index) {
      this.showUserDetail = true
      // this.userDetailData = rowData
      this.userDetailData.userName = rowData.userName
      this.userDetailData.age = rowData.age
      this.userDetailData.phone = rowData.phone
      this.userDetailData.occupation = rowData.occupation
      this.userDetailData.index = index
    },
    //编辑
    editClick(rowData) {
      console.log(rowData)
    },
    //删除
    deleteClick(rowData) {
      console.log(rowData)
    },
    getData() {
      // if (this.pageNo < this.totalPage) {
      //   this.pageNo = this.pageNo + 1
      // }
      console.log(
        '请求数据 页码:' +
          this.myParams.pageNo +
          ' 页面数量:' +
          this.myParams.pageSize +
          ' token:' +
          this.myParams.token
      )
      if (this.myParams.pageNo == 1) {
        this.users = this.pageData1
      } else if (this.myParams.pageNo == 2) {
        this.users = this.pageData2
      } else if (this.myParams.pageNo == 3) {
        this.users = this.pageData3
      }
    },
    cancleDialog() {
      this.showUserDetail = false
    },
    receiveData(userform) {
      this.showUserDetail = false
      // this.users[userform.index] = userform
      if (this.myParams.pageNo == 1) {
        this.pageData1[userform.index] = userform
        console.log('提交的用户数据1:' + userform.index)
      } else if (this.myParams.pageNo == 2) {
        this.pageData2[userform.index] = userform
        // this.users = this.pageData2
        console.log('提交的用户数据2:' + userform.index)
      } else if (this.myParams.pageNo == 3) {
        this.pageData3[userform.index] = userform
        // this.users = this.pageData3
        console.log('提交的用户数据3:' + userform.index)
      }
    },
  },
  created() {
    console.log('created')
  },
}
</script>
<style lang="scss" scoped>
.tabCss {
  width: 100%;
  margin: 25px;
}
</style>
